<template lang="pug">
div(ref="elementRef" style="width: 100%; height: 100%; background-color: #00000000")
  iframe(:src="src", frameborder="0",style="width: 100%; height: 100%;") 
</template>
<script setup lang="ts">
import {
  useNotify,
} from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
const $api = useApi();
const $notify = useNotify();
const { request } = useRequest({
  dcmJson: () => {
    return $api.pacs.dicomNode.getDcmJson(props.deviceId ?? "", props.registrationIds ?? "");
  },
});
//添加 Props属性
const props = defineProps({
  registrationIds: {
    type: String,
    default: ""
  },
  deviceId: {
    type: String,
    default: ""
  },
});
const src = ref("")
watch(
  () => props.registrationIds,
  (item) => {
    src.value = "";
    if (item && item.length > 0) {
      request("dcmJson").then((res) => {
        if (res) {
          // src.value = window.location.protocol + "//" + window.location.hostname
          //   + ":9025/#/viewer/dicomjson?url="
          //   window.location.protocol + "//" + window.location.hostname+":9025"
          //    + item.data;
          src.value = "http://223.87.166.240"
            + ":9025/#/viewer/dicomjson?url="
            + res + "&registrationId=" + props.registrationIds;
        }
        else {
          $notify.warning("暂无影像！！")
        }
      });
      // src.value = window.location.protocol + "//" + window.location.hostname
      //   + ":9025/#/viewer/dicomjson?url="
      //   + window.location.origin
      //   + "/gateway?serviceName=DicomNodeService&methodName=getDcmJson&deviceId=" + props.deviceId + "&registrationId=" + item + "";

    }
  },
  {
    immediate: true,
  }
);
// import { ref, onMounted } from "vue"
// import {
//   RenderingEngine,
//   Enums,
//   type Types,
// } from "@cornerstonejs/core"
// import { init as csRenderInit } from '@cornerstonejs/core';
// import { init as csToolsInit } from '@cornerstonejs/tools';
// import { init as dicomImageLoaderInit, } from '@cornerstonejs/dicom-image-loader';
// import wadors from '@cornerstonejs/dicom-image-loader/wadors';
// import { api } from 'dicomweb-client';

// // Add interface for function parameters
// interface ImageMetadataParams {
//   StudyInstanceUID: string;
//   SeriesInstanceUID: string;
//   SOPInstanceUID?: string | null;
//   wadoRsRoot: string;
//   client?: api.DICOMwebClient | null;
// }


// type WADORSMetaData = {
//   [key: string]: any;
// };

// // Create refs
// const elementRef = ref<HTMLDivElement | null>(null)
// const running = ref(false)

// async function createImageIdsAndCacheMetaData({
//   StudyInstanceUID,
//   SeriesInstanceUID,
//   SOPInstanceUID = null,
//   wadoRsRoot,
//   client = null,
// }: ImageMetadataParams) {
//   const SOP_INSTANCE_UID = "00080018"
//   const SERIES_INSTANCE_UID = "0020000E"

//   const studySearchOptions = {
//     studyInstanceUID: StudyInstanceUID,
//     seriesInstanceUID: SeriesInstanceUID,
//   }

//   const dicomClient: api.DICOMwebClient =
//     client ??
//     new api.DICOMwebClient({ url: wadoRsRoot, singlepart: true });

//   const instances = await dicomClient.retrieveSeriesMetadata(studySearchOptions);
//   const imageIds = instances.map((instanceMetaData: any) => {
//     const seriesUID = instanceMetaData[SERIES_INSTANCE_UID]?.Value?.[0]
//     if (!seriesUID) {
//       throw new Error('Series Instance UID not found in metadata')
//     }

//     const sopUID = instanceMetaData[SOP_INSTANCE_UID]?.Value?.[0]
//     if (!sopUID && !SOPInstanceUID) {
//       throw new Error('SOP Instance UID not found in metadata')
//     }

//     const SOPInstanceUIDToUse = SOPInstanceUID || sopUID

//     const prefix = "wadors:"
//     const imageId =
//       prefix +
//       wadoRsRoot +
//       "/studies/" +
//       StudyInstanceUID +
//       "/series/" +
//       seriesUID +
//       "/instances/" +
//       SOPInstanceUIDToUse +
//       "/frames/1"

//     wadors.metaDataManager.add(
//       imageId,
//       instanceMetaData as WADORSMetaData
//     )
//     return imageId
//   })

//   return imageIds
// }

// // Setup function
// const run = async () => {
//   if (running.value) {
//     return
//   }
//   running.value = true
//   await csRenderInit()
//   await csToolsInit()
//   dicomImageLoaderInit({ maxWebWorkers: 1 })

//   // Get Cornerstone imageIds and fetch metadata into RAM
//   // const imageIds = await createImageIdsAndCacheMetaData({
//   //   StudyInstanceUID:
//   //     "1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463",
//   //   SeriesInstanceUID:
//   //     "1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561",
//   //   wadoRsRoot: "https://d3t6nz73ql33tx.cloudfront.net/dicomweb",
//   // })

//   // Instantiate a rendering engine
//   const renderingEngineId = "myRenderingEngine"
//   const renderingEngine = new RenderingEngine(renderingEngineId)
//   const viewportId = "CT_STACK"

//   const viewportInput = {
//     viewportId,
//     type: Enums.ViewportType.STACK,
//     element: elementRef.value as HTMLDivElement,
//     // defaultOptions: {
//     //   orientation: Enums.OrientationAxis.SAGITTAL,
//     // },
//   }

//   renderingEngine.enableElement(viewportInput)

//   // Get the viewport
//   const viewport = renderingEngine.getViewport(
//     viewportId
//   ) as Types.IStackViewport

//   // Define a volume in memory
//   // const volumeId = "streamingImageVolume"
//   // const volume = await volumeLoader.createAndCacheVolume(volumeId, {
//   //   imageIds,
//   // })


//   const imageId = "wadouri:" + "http://localhost:8086/dcmServer/bbmri-53323851.dcm";
//   viewport.setStack([imageId]).then(() => {
//     // Set the volume to load
//     // volume.load()
//     // Render the image
//   });
//   viewport.render();
//   // Set the volume on the viewport
//   // viewport.setVolumes([{ volumeId }])


// }
// // Run setup on mount
// onMounted(() => {
//   run();

// })
</script>
